<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 960px;
				margin: 200px atuo;
				position: relative;
			}
			#d1 img{
				border: 1px solid #ddd;
				padding: 10px;
				position: absolute;
				background: #fff;
				z-index: 1;
				transition: all 0.6s ease-in-out ;  
			}
			#d1 img:nth-of-type(1){
				top: 100px;
				left: 300px;
				transform: rotate(-20eg);
			}#d1 img:nth-of-type(2){
				top: 0px;
				left: 20px;
				transform: rotate(-20deg);
			}#d1 img:nth-of-type(3){
				top: 200px;
				left:1000px;
				transform: rotate(-15deg);
			}#d1 img:nth-of-type(4){
				top: 900px;
				left: 0px;
				transform: rotate(-15deg);
			}#d1 img:nth-of-type(5){
				top: 900px;
				left: 500px;
				transform: rotate(-15deg);
			}#d1 img:nth-of-type(6){
				top: 1200px;
				left: 400px;
				transform: rotate(-15deg);
			}#d1 img:nth-of-type(7){
				top: 1000px;
				left: 1000px;
				transform: rotate(-15deg);
			}#d1 img:nth-of-type(8){
				top: 500px;
				left: 1500px;
				transform: rotate(-15deg);
			}
			#d1 img:nth-of-type(9){
				top: 600px;
				left:1800px;
				transform: rotate(45deg);
			}
			#d1 img:nth-of-type(10){
				top: 500px;
				left: 500px;
				transform: rotate(30deg);
			}
			#d1 img:hover{
				z-index: 2;
				box-shadow: 5px 5px 5px #ddd;
				transform: rotate(0deg) scale(1.5);
				
			}
		</style>
	</head>
	<body>
	<div id="d1">
	<img src="img/1.jpg"/>
	<img src="img/2.jpg"/>
	<img src="img/3.jpg"/>
	<img src="img/4.jpg"/>
	<img src="img/5.jpg"/>
	<img src="img/6.jpg"/>
	<img src="img/7.jpg"/>
	<img src="img/8.jpg"/>
	<img src="img/9.jpg"/>
	<img src="img/10.jpg"/>
	
	</div>
	</body>
</html>
